<!-- 选择商品 -->
<template>
  <el-dialog :title="title" :visible.sync="mVisible" v-if="mVisible" @close="dialogClose" width="900px">
    <div class="select-product">
      <div class="search">
        <el-cascader clearable v-model="query.productCategoryId" :props="{ value: 'id', label: 'name', checkStrictly: true }"
                     :options="proClass" placeholder="请选择商品分类" :style="{width: width}"></el-cascader>
        <Cselect v-model="query.groupId" :options="proGroup" placeholder="请选择商品分组" :style="{width: width, margin:'0 10px'} "></Cselect>
        <el-input v-model="query.keyword" placeholder="请输入商品名称" :style="{width: width, margin:'0 10px 0 0'}"></el-input>
        <Cbutton @click="handleSearch" :btnloading="tableLoading" size="medium">查询</Cbutton>
      </div>

      <div class="select-tab" style="margin: 20px 0;">
        <el-table :data="tableList" v-loading="tableLoading" ref="tableData" border fit @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" :selectable="handleSelectable"></el-table-column>
          <el-table-column label="序号" type="index" width="70" align="center"></el-table-column>
          <el-table-column prop="icon" label="商品图片" align="center">
            <template slot-scope="scope">
              <el-image :src="scope.row.pic || ''" style="width: 50px; height: 50px" fit="fit" :preview-src-list="scope.row.pic ? [scope.row.pic] : []"></el-image>
            </template>
          </el-table-column>
          <el-table-column label="商品名称" prop="name" min-width="130" align="center"></el-table-column>
          <el-table-column label="商品规格" prop="productStyleStr" align="center"></el-table-column>
          <el-table-column label="商品价格" prop="priceStr" align="center"></el-table-column>
          <el-table-column label="积分价格" prop="usePointLimitStr" align="center"></el-table-column>
          <el-table-column label="库存" prop="stock" align="center"></el-table-column>
          <el-table-column v-if="isForbidden" label="活动占用" prop="" align="center">
            <template slot-scope="scope">
              <span>{{dealListStr(scope.row.marketType, 'activityType')}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="select-page">
        <div class="select-page-left">已选商品{{selectionList ? selectionList.length : 0}}件</div>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="query.pageNum"
                       :page-size="query.pageSize" :page-sizes="[5, 10, 20, 40, 100]" layout="total, sizes, prev, pager, next"
                       :total="totalCount">
        </el-pagination>
      </div>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleCancle">取 消</el-button>
      <el-button size="small" type="primary" @click="handleSub">确 定</el-button>
    </span>

  </el-dialog>
</template>

<script>
import { ProductPool } from '@/api/onlineMan'
import { ExportStr } from '@/utils'

export default {
  name: 'selectProduct',
  components: {},
  data () {
    return {
      width: '190px',
      query: {
        keyword: '',
        productCategoryId: '',
        groupId: '',
        pageNum: 1,
        pageSize: 10
      },
      tableList: [],
      tableLoading: false,
      totalCount: 0,
      selectionList: []
    }
  },
  props: {
    title: {
      type: String,
      default: '选择商品'
    },
    modalShow: {
      type: Boolean,
      default: false
    },
    isForbidden: {
      // 是否需要禁用
      type: Boolean,
      default: true
    },
    pageSize: {
      type: Number,
      default: 10
    }
  },
  watch: {},
  computed: {
    mVisible: {
      get () {
        return this.modalShow
      },
      set (val) {
        this.$emit('update:modalShow', val)
      }
    },
    proClass () {
      return this.$store.state.com.productClassList || []
    },
    proGroup () {
      return this.$store.state.com.productGroupList || []
    }
  },
  created () {
    if (this.proClass.length <= 0) {
      this.$store.dispatch('getProClass', true)
    }
    if (this.proGroup.length <= 0) {
      this.$store.dispatch('getProGroup', true)
    }
  },
  mounted () {
    this.query.pageSize = this.pageSize || 10
    this.getList()
  },
  methods: {
    getList () {
      this.tableLoading = true
      let params = JSON.parse(JSON.stringify(this.query))

      if (this.query && this.query.productCategoryId && this.query.productCategoryId.length === 1) {
        params.productCategoryId = this.query.productCategoryId[0] || ''
      }
      if (this.query && this.query.productCategoryId && this.query.productCategoryId.length === 2) {
        params.productCategoryId = this.query.productCategoryId[1] || ''
      }
      ProductPool(params).then(res => {
        this.tableLoading = false
        let list = res.data.list || []
        list.forEach(e => {
          e.productId = e.id || ''
          e.productStyleStr = (e.productStyle === 1 ? '单' : '多') + '规格'
          e.priceStr = e.productStyle === 1 ? e.price : e.originPrice
          e.usePointLimitStr = e.productStyle === 1 ? e.usePointLimit : e.originUsePointLimit
        })
        this.tableList = list
        this.totalCount = res.data.total || 0
      }).catch(e => {
        this.tableLoading = false
      })
    },
    handleSelectable (row) {
      if (this.isForbidden) {
        return !row.marketType
      } else {
        return true
      }
    },
    handleSearch () {
      this.getList()
    },
    handleSelectionChange (selection) {
      this.selectionList = selection
    },
    handleCurrentChange (value) {
      this.query.pageNum = value
      this.getList()
    },
    handleSizeChange (value) {
      this.query.pageSize = value
      this.getList()
    },
    dialogClose () {
      this.$emit('update:modalShow', false)
    },
    handleCancle () {
      this.$emit('update:modalShow', false)
    },
    handleSub () {
      if (this.selectionList.length <= 0) {
        this.$message.warning('请选择商品！')
        return
      }
      this.upEmitData()
    },
    upEmitData () {
      this.$store.dispatch('setSelectedProductList', this.selectionList)
      this.$emit('selectChange', this.selectionList || [])
      this.$emit('update:modalShow', false)
    },
    dealListStr (key, type) {
      if (!key) return '--'
      return ExportStr(key, type)
    }
  }
}

</script>
<style lang='scss' scoped>
</style>
